<template>
  <!--  外部div-->
  <div class="login">
    <div class="title">
      <el-image
          style="width: 100px; height: 100px"
          :src="require('./assets/images/logo.png')"
          fit="contain"></el-image>
      <div class="text">
        <div class="subTitle">高新区（天元区）项目服务管理平台</div>
        <div class="engtext">TIANYUAN DISTRICT PROJECT SERVICE MANAGEMENT PLATFORM</div>
      </div>

    </div>
    <div style="height: 5vh"></div>
    <div class="content">
      <div class="item baseinfo" @click="baseinfoClick">
        <el-image
            style="width: 75px; height: 75px;margin-bottom: 15px"
            :src="require('./assets/images/基本情况.png')"
            fit="contain"></el-image>
        <div style="font-family: '黑体';color: white;font-size: 22px">基本信息</div>
      </div>
      <div class="item tongchou" @click="landPlan">
        <el-image
            style="width: 65px; height: 65px"
            :src="require('./assets/images/土地一级开发.png')"
            fit="contain"></el-image>
        <div style="font-family: '黑体';color: white;font-size: 20px">土地一级<br>开发统筹图</div>
      </div>
      <div class="item touzi"  @click="societyPlan">
        <el-image
            style="width: 65px; height: 65px"
            :src="require('./assets/images/项目审批.png')"
            fit="contain"></el-image>
        <div style="font-family: '黑体';color: white;font-size: 20px">社会投资工业<br>项目审批统筹图</div>
      </div>
      <div class="item project" @click="keyProjects">
        <el-image
            style="width: 65px; height: 65px"
            :src="require('./assets/images/重点项目.png')"
            fit="contain"></el-image>
        <div style="font-family: '黑体';color: white;font-size: 20px">重点项目<br>挂图作战</div>
      </div>
      <div class="item diaodu" @click="projectScheduling">
        <el-image
            style="width: 65px; height: 65px"
            :src="require('./assets/images/项目调度.png')"
            fit="contain"></el-image>
        <div style="font-family: '黑体';color: white;font-size: 25px">项目调度<br>工作机制</div>
      </div>
    </div>
    <div class="contentfade"></div>




    <div style="height: 10vh"></div>
    <!--  底部  -->
    <div class="el-login-footer">
      <span  style="font-size: 10pt">------项目服务局------</span>
    </div>
  </div>
</template>

<script>

import Cookies from "js-cookie";
import {encrypt} from "@/utils/jsencrypt";

export default {
  name: "MenuIndex",
  data() {
    return {

    }
  },
  methods:{
    baseinfoClick(){
      this.$router.push({path:'/baseInfo'})
    },
    landPlan(){
      this.$router.push({path:'/landPlan'})
    },
    societyPlan(){
      this.$router.push({path:'/societyPlan'})
    },
    keyProjects(){
      this.$router.push({path:'/keyProjects'})
    },
    projectScheduling(){
      this.$router.push({path:'/projectScheduling'})
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 5px;
  height: 100%;
  background-image: url("./assets/images/logoImg.png");
  background-size: 100% 100%;

}


.content{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 99;
  .item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 0.5vw;
  }
  .baseinfo{
    width: 12vw;
    height: 25vh;
    background-image: url("./assets/images/菜单背景1.png");
    background-size: 100% 100%;
  }
  .tongchou{
    width: 11vw;
    height: 16vh;
    background-image: url("./assets/images/菜单背景2.png");
    background-size: 100% 100%;
  }
  .touzi{
    width: 10vw;
    height: 14vh;
    background-image: url("./assets/images/菜单背景3.png");
    background-size: 100% 100%;
  }
  .project{
    width: 11vw;
    height: 16vh;
    background-image: url("./assets/images/菜单背景4.png");
    background-size: 100% 100%;
  }
  .diaodu{
    width: 12vw;
    height: 25vh;
    background-image: url("./assets/images/菜单背景5.png");
    background-size: 100% 100%;
  }

}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  position: relative;
  top: -10vh;
  color: #707070;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    .subTitle{
      color: white;
      font-size: 50px;
    }
    .engtext{
      color: white;
      font-size: 15px;
      letter-spacing: 6px;
    }
  }

}
.contentfade{
  width: 59vw;
  height: 10vh;
  background-image: url("./assets/images/菜单投影.png");
  background-size: 100% 100%;
  position: relative;
  top: -58px;
  left: -5px;
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

* {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select: none;
  user-select: none
}
</style>
